<div class="allapp">
  <page-header [title]="'所有app列表'"></page-header>
  <nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'" class="search__form">
      <nz-row [nzGutter]="{ md: 8, lg: 24, xl: 48 }">
        <nz-col nzMd="8" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="no">关键字查询</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="keyword" name="no" placeholder="请输入名称关键字 或 完整的类型名称" id="no">
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="8">
          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" (click)="fetchAppList()">查询</button>
          <button nz-button type="reset" class="mx-sm" (click)="fetchAppList(true)">重置</button>
        </nz-col>
      </nz-row>
    </form>
    <!-- 操作按钮选项 -->
    <div class="action_btn" style="margin-bottom: 16px;">
      <button nz-button [nzType]="'primary'" (click)="openAppDetail()">
        添加app
      </button>
      <button nz-popconfirm nzTitle="您将删除{{ selectNumber }}个app" (nzOnConfirm)="deleteAppList()" nz-button [nzType]="'primary'" [disabled]="disabledButton">
        <ng-container *ngIf="selectNumber">删除app {{ selectNumber }} </ng-container>
        <ng-container *ngIf="!selectNumber">删除app</ng-container>
      </button>
    </div>
    <!-- 数据表格 -->
    <nz-table #appTable [nzData]="applist" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="dataTotal"
      [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="fetchAppList()">
      <thead>
        <tr>
          <th nzWidth="5%" nzShowCheckbox
            [(nzChecked)]="allChecked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="checkAll($event)">
          </th>
          <th nzWidth="8%">图标</th>
          <th nzWidth="12%">名称</th>
          <th nzWidth="10%">类型</th>
          <th nzWidth="21%">链接</th>
          <th nzWidth="8%">兼容平台</th>
          <th nzWidth="8%">发布顺序</th>
          <th nzWidth="8%">聊天显示</th>
          <th nzWidth="14%">添加时间</th>
          <th nzWidth="6%">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of appTable.data">
          <td nzShowCheckbox
            [(nzChecked)]="selectList[item.appName]"
            (nzCheckedChange)="refreshStatus()">
          </td>
          <td>
            <nz-avatar nzIcon="" [nzSrc]="item.appIcon"></nz-avatar>
          </td>
          <td>{{ item.appName }}</td>
          <td>
            <span *ngIf="item.appType === 'marketAppList'">行情</span>
            <span *ngIf="item.appType === 'gameNewAppList'">新品</span>
            <span *ngIf="item.appType === 'gameHotAppList'">热门</span>
            <span *ngIf="item.appType === 'hotTgGroup'">群组</span>
            <span *ngIf="item.appType === 'toolsAppList'">工具</span>
          </td>
          <td>{{ item.appUrl }}</td>
          <td>
            <nz-tag [nzColor]="'#108ee9'" *ngIf="item.platform === ''">全部</nz-tag>
            <nz-tag [nzColor]="'#87d068'" *ngIf="item.platform === 'android'">安卓</nz-tag>
            <nz-tag [nzColor]="'#ff1b7a'" *ngIf="item.platform === 'ios'">苹果</nz-tag>
            <nz-tag [nzColor]="'#bbb'" *ngIf="item.platform === 'offline'">停运</nz-tag>
          </td>
          <td>{{ item.seqNum }}</td>
          <td>
            <label *ngIf="item.chatDapp === true">是</label>
            <label *ngIf="item.chatDapp === false">否</label>
          </td>
          <td>{{ item.createdAt | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
          <td>
            <a (click)="openAppDetail(item)">查看</a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>

  <nz-modal nzWrapClassName="app-detail-modal" [(nzVisible)]="isVisible" [nzTitle]="appDetailModalTitle" (nzOnCancel)="closeAppDetail()" (nzOnOk)="handleConfirm()" [nzFooter]="null" [nzMaskClosable]="false">
    <!-- 使用添加app组件 -->
    <app-appdetail [appInfo]="selectAppInfo" [operate]="operate" (onRefreshData)="fetchAppList()"></app-appdetail>
  </nz-modal>
</div>

<ng-template #appDetailModalTitle>
  <span class="modal-title"> {{ modalTitle }} </span>
</ng-template>